<h1><code ng:non-bindable=""></code>
    <span class="hint"></span>
</h1>
<div><a href="http://github.com/angular/angular.js/edit/master/docs/content/guide/dev_guide.templates.css-styling.ngdoc"
        class="improve-docs btn btn-primary">Improve this doc</a>

    <div class="developer-guide-page developer-guide-templates-working-with-css-in-angular-page"><p>Angular sets these
        CSS classes. It is up to your application to provide useful styling.</p>

        <h1 id="cssclassesusedbyangular">CSS classes used by angular</h2>

            <ul>
                <li><p><code>ng-invalid</code>, <code>ng-valid</code></p>

                    <ul>
                        <li><strong>Usage:</strong> angular applies this class to an input widget element if that
                            element's input does
                            not pass validation. (see <a href="api/ng.directive:input"><code>input</code></a>
                            directive).
                        </li>
                    </ul>
                </li>
                <li><p><code>ng-pristine</code>, <code>ng-dirty</code></p>

                    <ul>
                        <li><strong>Usage:</strong> angular <a href="api/ng.directive:input"><code>input</code></a>
                            directive applies <code>ng-pristine</code> class
                            to a new input widget element which did not have user interaction. Once the user interacts
                            with
                            the input widget the class is changed to <code>ng-dirty</code>.
                        </li>
                    </ul>
                </li>
            </ul>

            <h2 id="relatedtopics">Related Topics</h3>

                <ul>
                    <li><a href="guide/dev_guide.templates">Angular Templates</a></li>
                    <li><a href="guide/forms">Angular Forms</a></li>
                </ul>
    </div>
</div>
